import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import './AddVersionPage.css';
import { projectApi, projectVersionApi, releaseApi } from '../../services/api';
import { useKeycloak } from '../../contexts/KeycloakContext';

const AddVersionPage = () => {
  const { projectId } = useParams();
  const navigate = useNavigate();
  const { keycloak, user } = useKeycloak();
  
  // 状态管理
  const [loading, setLoading] = useState(true);
  const [pageReady, setPageReady] = useState(false);
  const [project, setProject] = useState(null);
  const [formData, setFormData] = useState({
    versionCode: '',
    envTypes: 'UAT', // 默认选择UAT环境
    updateLog: ''
  });

  // 页面准备就绪状态
  useEffect(() => {
    console.log('检查页面准备状态，keycloak.authenticated:', keycloak.authenticated, 'user:', user);
    
    const checkAuthStatus = async () => {
      // 如果 Keycloak 已认证
      if (keycloak.authenticated) {
        // 如果用户信息已加载，设置页面就绪
        if (user) {
          console.log('用户已登录，用户ID:', user.id);
          setPageReady(true);
        } else {
          // 如果用户信息未加载，尝试加载用户信息
          console.log('Keycloak 已认证，但用户信息未加载，尝试加载用户信息...');
          try {
            const profile = await keycloak.loadUserProfile();
            console.log('用户信息加载成功:', profile);
            // 用户信息会通过 KeycloakContext 自动更新
            setPageReady(true);
          } catch (error) {
            console.error('加载用户信息失败:', error);
            // 即使用户信息加载失败，也继续加载页面
            setPageReady(true);
          }
        }
      } else if (keycloak.initialized && !keycloak.authenticated) {
        // 如果 Keycloak 已初始化但未认证，重定向到登录页
        console.log('用户未认证，重定向到登录页');
        navigate('/login', { state: { from: window.location.pathname } });
      }
    };
    
    checkAuthStatus();
  }, [user, keycloak, navigate]);

  // 加载项目信息
  useEffect(() => {
    console.log('useEffect 被调用, projectId:', projectId, 'pageReady:', pageReady);
    
    const loadProject = async () => {
      if (!pageReady) {
        console.log('页面未就绪，等待中...');
        return; // 等待页面就绪
      }
      
      if (!projectId) {
        console.error('未找到项目ID');
        navigate('/projects'); // 如果没有项目ID，重定向到项目列表
        return;
      }
      
      try {
        console.log('开始加载项目信息...');
        setLoading(true);
        
        const response = await projectApi.getProject(projectId);
        console.log('项目信息响应:', response);
        
        if (response.code === 200 && response.data) {
          setProject(response.data);
          console.log('项目信息加载成功:', response.data);
          
          // 设置默认版本号（项目名称 + 当前日期）
          const today = new Date();
          const dateStr = `${today.getFullYear()}${(today.getMonth() + 1).toString().padStart(2, '0')}${today.getDate().toString().padStart(2, '0')}`;
          setFormData(prev => ({
            ...prev,
            versionCode: `${response.data.name}_${dateStr}_v1.0.0`
          }));
        } else {
          console.error('加载项目信息失败:', response.message);
          alert(`加载项目信息失败: ${response.message}`);
          navigate('/projects');
        }
      } catch (error) {
        console.error('加载项目信息异常:', error);
        alert(`加载项目信息异常: ${error.message}`);
        navigate('/projects');
      } finally {
        setLoading(false);
      }
    };

    loadProject();
    
    // 清理函数
    return () => {
      // 可以在这里取消未完成的请求
    };
  }, [projectId, pageReady, navigate]); // 添加 navigate 到依赖数组

  // 处理表单输入变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  // 处理环境选择变化
  const handleEnvironmentChange = (env) => {
    setFormData({
      ...formData,
      envTypes: env
    });
  };

  // 处理表单提交
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // 表单验证
    if (!formData.versionCode.trim()) {
      alert('请输入版本号');
      return;
    }
    
    try {
      // 准备提交数据
      const versionData = {
        projectId: parseInt(projectId),
        versionCode: formData.versionCode,
        envTypes: formData.envTypes,
        updateLog: formData.updateLog,
        userId: user?.id // 从Keycloak获取用户ID
      };
      
      console.log('提交版本数据:', versionData);
      
      // 调用API创建版本
      const response = await projectVersionApi.addProjectVersion(versionData);
      
      if (response.code === 200 && response.data) {
        alert('版本创建成功');
        // 跳转到Release列表页
        // 不要再调用project-version接口，直接跳转到releases页面
        console.log('跳转到Release列表页');
        navigate('/releases');
      } else {
        alert(`创建版本失败: ${response.message}`);
      }
    } catch (error) {
      console.error('创建版本异常:', error);
      alert(`创建版本异常: ${error.message}`);
    }
  };

  // 返回上一页
  const handleCancel = () => {
    navigate(-1);
  };

  // 渲染加载状态
  if (!pageReady) {
    return (
      <div className="loading-container">
        <div className="loading-spinner"></div>
        <p>正在准备页面...</p>
      </div>
    );
  }
  
  if (loading) {
    return (
      <div className="loading-container">
        <div className="loading-spinner"></div>
        <p>正在加载项目信息，请稍候...</p>
      </div>
    );
  }

  if (!project) {
    return (
      <div className="error-container">
        <h2>无法加载项目信息</h2>
        <p>请返回项目列表重试</p>
        <button 
          className="back-button"
          onClick={() => navigate('/projects')}
        >
          返回项目列表
        </button>
      </div>
    );
  }

  return (
    <div className="add-version-page">
      <div className="page-header">
        <div className="header-content">
          <h1>新增版本 - {project.name}</h1>
          <button 
            className="back-button"
            onClick={handleCancel}
          >
            返回
          </button>
        </div>
        <p className="page-description">为项目 {project.name} 创建新版本</p>
      </div>
      
      <div className="project-info">
        <div className="info-item">
          <label>项目名称:</label>
          <span>{project.name}</span>
        </div>
        <div className="info-item">
          <label>当前最新版本:</label>
          <span>{project.latestVersion || '暂无版本'}</span>
        </div>
      </div>
      
      <form className="version-form" onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="versionCode">新建版本号: <span className="required">*</span></label>
          <input
            type="text"
            id="versionCode"
            name="versionCode"
            value={formData.versionCode}
            onChange={handleInputChange}
            placeholder="请输入版本号"
            required
          />
        </div>
        
        <div className="form-group">
          <label>环境:</label>
          <div className="environment-options">
            <label className="env-option">
              <input
                type="radio"
                name="environment"
                checked={formData.envTypes === 'UAT'}
                onChange={() => handleEnvironmentChange('UAT')}
              />
              <span>UAT</span>
            </label>
            <label className="env-option">
              <input
                type="radio"
                name="environment"
                checked={formData.envTypes === 'PRO'}
                onChange={() => handleEnvironmentChange('PRO')}
              />
              <span>PRO</span>
            </label>
          </div>
        </div>
        
        <div className="form-group">
          <label htmlFor="updateLog">版本更新日志:</label>
          <textarea
            id="updateLog"
            name="updateLog"
            value={formData.updateLog}
            onChange={handleInputChange}
            placeholder="请输入版本更新日志"
            rows={5}
          />
        </div>
        
        <div className="form-actions">
          <button type="button" className="btn-cancel" onClick={handleCancel}>取消</button>
          <button type="submit" className="btn-submit">创建版本</button>
        </div>
      </form>
    </div>
  );
};

export default AddVersionPage;
